<template>
  <div class="work-management">
    <div class="work-search">
      <h3 style="margin-bottom: 10px">作品管理</h3>
      <div>
        <el-input
          placeholder="请输入内容"
          v-model="keyword"
          class="input-with-select"
        >
          <el-button slot="append" icon="el-icon-search"></el-button
        ></el-input>
      </div>
    </div>
    <div class="work-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部作品" name="first">
         <WorksManagement :dataList="workStatusList" :status="-1"></WorksManagement>
        </el-tab-pane>
        <el-tab-pane label="已发布" name="second">
           <WorksManagement :dataList="workStatusList" :status="1"></WorksManagement>
        </el-tab-pane>
        <el-tab-pane label="审核中" name="third">
           <WorksManagement :dataList="workStatusList" :status="2"></WorksManagement>
        </el-tab-pane>
        <el-tab-pane label="未通过" name="fourth">
           <WorksManagement :dataList="workStatusList" :status="3"></WorksManagement>
        </el-tab-pane>
      </el-tabs>
    </div>
   
  </div>
</template>

<script>
import WorksManagement from '@/components/WorksManagement.vue'
import { getWorkStatusApi } from "@/api/workManagement";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      workStatusList: [],
      workName: "",
      worksStatus: -1,
      activeName: "first",
      keyword:''
    };
  },
  components:{
    WorksManagement
  },
  created() {
    this.getWorkStatusFun();
  },
  methods: {
    getWorkStatusFun() {
      getWorkStatusApi({
        userId: this.userInfo.userId,
        statua: this.worksStatus,
        page: 1,
        keyword: this.keyword,
      }).then((res) => {
        if (res.data.code == 200) {
          this.workStatusList = res.data.data;
        }
      });
    },
    handleClick(tab, event) {
      if (this.activeName == "first") {
        this.worksStatus = -1
      } else if (this.activeName == "second") {
        this.worksStatus = 1
      } else if (this.activeName == "third") {
        this.worksStatus = 2
      } else {
         this.worksStatus = 3
      }
      this.getWorkStatusFun();
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.work-management {
  width: 98%;
  background: #fff;
  margin: auto;
  padding: 15px 20px 30px 20px;
  box-sizing: border-box;
  border-radius: 8px;
}
.work-box .el-tabs__item {
  color: #2d2d2d;
  font-size: 16px;
}
.work-box .el-tabs__item.active {
  font-weight: 600;
}

.change-description .el-dialog .set-authority .el-dialog {
  background: #fefeff;
}
.change-description .el-textarea__inner,
.change-description .el-input__inner {
  resize: none;
  background: #f7f7f7;
}
.change-description .el-dialog__body,
.set-authority .el-dialog__body {
  padding: 12px 20px;
}
.change-description .el-textarea .el-input__count {
  background: #f7f7f7;
}
.add-topic .el-button {
  font-weight: 600;
  padding: 3px 5px;
  font-size: 12px;
  border: none;
  background: #f7f7f7;
  color: #888c95;
}
.see-authority,
.video-authority {
  font-weight: 600;
  margin: 15px 0 8px 0;
}
.set-authority .el-radio.is-bordered.is-checked {
  border: none;
  background: #feebf0;
}
.set-authority .el-radio__input.is-checked + .el-radio__label {
  color: #fe2c55;
}
.set-authority .el-radio__input.is-checked .el-radio__inner {
  border-color: #fe2c55;
  background: #fe2c55;
}
.work-box .el-tabs__item.is-active {
  color: #409eff;
}
.dialog-picture .el-upload-dragger {
  width: 735px;
  /* width: 100%; */
  height: 300px;
}
.dialog-picture .el-upload-dragger .el-icon-upload {
  line-height: 140px;
}
.work-search {
  display: flex;
  justify-content: space-between;
}
.photo-title .el-input__count .el-input__count-inner {
  background: none;
}
</style>
